<template>
  <div class="pagination">
    <div class="pagination-total">
      共<span>{{ total }}</span
      >个记录
    </div>
    <a-pagination
      v-bind="$attrs"
      v-model="current"
      :total="total"
      :page-size="curPageSize"
      @change="handleChange"
      show-size-changer
      :page-size-options="pageSizeList"
      @showSizeChange="onShowSizeChange"
      v-cloak
    >
    </a-pagination>
    <div class="pagination-total-number">
      <span>{{ current }}</span
      >/{{ allPage }}
    </div>
    <div class="pagination-jumper">
      到第
      <a-input v-model="pageNumber" type="text" @blur="jumperToPage" @pressEnter="jumperToPage" />页
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Number,
      default: 1,
    },
    total: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 20,
    },
    pageSizeOptions: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      current: 1, //当前页码
      pageNumber: '', //跳转页码
      curPageSize: 20,
      pageSizeList: ['10', '20', '50', '100'],
    };
  },
  computed: {
    /**
     * @description: 总页数
     * @return {*}
     */
    allPage() {
      return Math.ceil(this.total / this.curPageSize);
    },
  },
  mounted() {
    if (this.pageSizeOptions.length) {
      this.pageSizeList = Object.assign(this.pageSizeOptions);
    }
    if (this.pageSize) {
      this.curPageSize = this.pageSize;
    }
  },
  methods: {
    /**
     * @description: 跳转页码
     * @return {*}
     */
    jumperToPage() {
      if (!this.pageNumber) return;
      this.pageNumber = Number(this.pageNumber);
      console.log(this.pageNumber);
      if (!this.pageNumber) {
        this.$modalMessage.error('页码应为数字');
        this.pageNumber = '';
        return false;
      }
      if (this.pageNumber < 1 || this.pageNumber > this.allPage) {
        this.$modalMessage.error('跳转页超出范围');
      } else {
        this.current = this.pageNumber;
        this.handleChange();
      }
      this.pageNumber = '';
    },
    /**
     * @description: pagesize变化
     * @param {*} current 当前页
     * @param {*} pageSize  每页条数
     * @return {*}
     */
    onShowSizeChange(current, pageSize) {
      this.curPageSize = pageSize;
      //当边pagesize时页码回到1
      this.current = 1;
      this.handleChange();
    },
    /**
     * @description: 触发父级数据变化
     * @param {*} page 页码
     * @return {*}
     */
    handleChange() {
      this.$emit('input', this.current);
      this.$emit('change', { page: this.current, pageSize: this.curPageSize });
    },
  },
  watch: {
    value(value) {
      this.current = value;
    },
    pageSize(value) {
      if (value) {
        this.curPageSize = value;
      }
    },
    pageSizeOptions: {
      deep: true,
      handler(value) {
        this.pageSizeList = Object.assign(value);
      },
    },
  },
};
</script>
<style lang="stylus" type="text/stylus" rel="stylesheet/stylus" scoped>
.pagination
  display flex
  align-items center
.pagination-total
  margin-right 26px
  color #A6A6A6
  >span
    color #1890FF
    margin 0 2px
.pagination-total-number
  margin 0 16px
  color #A6A6A6
  >span
    color #00377A
.pagination-jumper
  display flex
  align-items  center
  color #8D9299
.ant-input
  margin 0 16px
  height 30px
  width 30px
  padding 0 4px
  text-align center
</style>
